<template>
    <div class="page-header-root">
        <div class="page-header" :style="{'--height':`${height}px`}">
            <div class="page-back"></div>
            <div class="top-left">
                <div class="page-logo">
                    <img class="logo-img" src="@/assets/images/page/logo.png">
                    <span>全域数字生态一张图</span>
                </div>
            </div>
            <div class="top-nav">
                <a-tabs>
                    <a-tab-pane v-for="(item, index) in headData"
                                :key="`${item.name}_${item.content}_${index}`">
                        <template v-slot:tab>
                            <div class="router-container">
                                <FireOutlined/>
                                <router-link :to="{name:item.name}">{{item.content}}</router-link>
                            </div>
                        </template>
                    </a-tab-pane>
                </a-tabs>
            </div>
            <div class="top-tool" @click="logOutFun">
                <PoweroffOutlined/>
                <span>退出</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {reactive, toRefs} from 'vue'
    import {PoweroffOutlined, FireOutlined} from '@ant-design/icons-vue';

    export default {
        components: {
            PoweroffOutlined,
            FireOutlined,
        },
        setup() {
            const data = reactive({});


            const refData = toRefs(data);
            return {
                ...refData,
            }
        },
        props: {
            height: {
                type: Number,
                default: 300
            },
            headData: {
                type: Array,
                default: () => [{content: '土地变化类型', name: 'PMapView'}]
            },
            logOutFun: {
                type: Function,
                default: () => {
                    console.log('退出登录')
                }
            }
        },
    }
</script>

<style lang="scss">
    $full: 100%;
    $border_top_width: 50;
    $border_right_width: 50;
    $border_bottom_width: 20;
    $border_left_width: 240;

    .page-header-root {
        width: $full;
        height: var(--height);
        background: rgb(2, 58, 53);

        .page-header {
            width: $full;
            height: $full;
            position: relative;

            &::before, &::after {
                content: '';
                display: table;
                clear: both;
            }

            .page-back {
                height: $full;
                width: $full;
                top: 0;
                border: {
                    style: solid;
                    left-width: #{$border_left_width}px;
                    top-width: #{$border_top_width}px;
                    right-width: #{$border_right_width}px;
                    bottom-width: #{$border_bottom_width}px;
                    image: {
                        source: url("@/assets/images/page/pageHeadBar.png");
                        slice: $border_top_width $border_right_width $border_bottom_width $border_left_width;
                        width: initial;
                        outset: initial;
                        repeat: initial;
                    };
                };
            }

            .top-left {
                padding-top: 10px;
                position: absolute;
                top: 0;
                height: $full;
                width: 300px;

                .page-logo {
                    height: $full;
                    width: $full;
                    padding: {
                        left: 20px;
                    };

                    .logo-img {
                        position: relative;
                        left: 0;
                        top: -5px;
                        height: 34px;
                        width: 30px;
                    }

                    span {
                        font: {
                            size: 24px;
                            family: '微软雅黑';
                            weight: bold;
                        };
                        padding: 10px;
                        color: white;
                    }
                }
            }

            .top-nav {
                position: absolute;
                top: 0;
                left: 350px;
                height: $full;
                max-width: 1000px;
                overflow: {
                    x: auto;
                    y: hidden;
                };

                .ant-tabs-line {
                    .ant-tabs-bar {
                        border: none;

                        .ant-tabs-tab-prev, .ant-tabs-tab-next {
                            color: white;

                            .ant-tabs-tab-prev-icon, .ant-tabs-tab-next-icon {
                                top: 45%;

                            }

                            &:hover {
                                color: #39ffdc;
                            }
                        }
                    }
                }

                .ant-tabs-nav-wrap {
                    .ant-tabs-nav-scroll {
                        .ant-tabs-nav {
                            .ant-tabs-tab {
                                margin: 0;

                                .router-container {
                                    text-align: center;
                                    height: 30px;
                                    width: 185px;
                                    line-height: 30px;
                                    font-size: 16px;
                                    float: left;
                                    border: {
                                        width: 1px;
                                        color: rgba(38, 163, 131, .6);
                                        style: solid;
                                        radius: 15px;
                                    };
                                    color: white;

                                    &:hover {
                                        border-color: #39ffdc;
                                        color: #39ffdc;

                                        a {
                                            color: #39ffdc;
                                        }
                                    }

                                    a {
                                        color: white;
                                        padding-left: 5px;
                                    }
                                }
                            }

                            .ant-tabs-ink-bar {
                                display: none !important;
                            }
                        }
                    }
                }
            }

            .top-tool {
                position: absolute;
                cursor: pointer;
                right: 0;
                top: 0;
                padding-top: 10px;
                height: $full;
                width: 70px;
                color: #67C23A;
                text-align: center;
                opacity: .6;

                &:hover {
                    opacity: 1;
                }

                span {
                    padding-left: 5px;
                }
            }
        }
    }

</style>
